<template>
	<view class="container">
		<view class="user-info-box">
			<image src="../../static/images/bg-mine.png" mode="" class="bg"></image>
			<view class="page-title" :style="{paddingTop: menuButtonInfo.top + 'px',lineHeight: menuButtonInfo.height + 'px'}">我的</view>
			<view class="user-info flex-x-bet-y-center" @tap="userInfoClick">
				<view class="flex">
					<image src="../../static/images/default-avatar.png" class="avatar" mode="" v-if="!userInfo.sysUser.avatar || !isLogin"></image>
					<image :src="userInfo.sysUser.avatar | formatFile" class="avatar" mode="" v-else></image>
					<view class="info-right flex-column-y-center">
						<view class="nickname">
							<text>{{isLogin ? userInfo.sysUser.nickName : '去登录'}}</text>
						</view>
						<view class="phone" v-if="userInfo.sysUser.phonenumber">{{userInfo.sysUser.phonenumber}}</view>
					</view>
				</view>
				<image src="../../static/images/icon-open.png" class="icon-open" mode=""></image>
			</view>
		</view>
		
		<view class="menu-list">
			<view class="menu-item flex-x-bet-y-center" v-for="(item, index) in menuList" :key="index" @tap="navTo(item.url)">
				<view class="flex-y-center">
					<image :src="item.icon" mode="" class="icon"></image>
					<text>{{item.text}}</text>
				</view>
				<image src="../../static/images/icon-open.png" class="icon-open" mode=""></image>
			</view>
		</view>
		
		<my-popup ref="getPhoneModal" :closeable="false" mode="center">
			<view class="modal-container" :style="{width: width + 'rpx'}">
				<view class="title">提示</view>
				<view class="content">需要获取您的手机号方便教师与 您取得联系。</view>
				<view class="btns flex-x-bet-y-center">
					<view class="cancel-btn flex-xy-center" @tap="cancelFun">暂不</view>
					<button class="confirm-btn phone-btn flex-xy-center" open-type="getPhoneNumber" @getphonenumber="getphonenumber">去授权</button>
				</view>
			</view>
		</my-popup>
	</view>
</template>

<script>
	
	import {
		getUserInfo,
		setUserInfo,
		getWechatPhone 
	} from '@/api/user.js'
	import {
		login,
		logout
	} from '@/utils/login.js'
	import {
		mapGetters
	} from 'vuex'
	
	export default {
		data() {
			return {
				userInfo: {
					sysUser: {}
				},
				menuButtonInfo: null,
				showPhoneCount: 0,	// 提示授权手机号次数
				menuList:[
					{
						icon: '/static/images/menu-1.png',
						text: '我的订单',
						url: '/pages/order/index'
					},
					{
						icon: '/static/images/menu-2.png',
						text: '设置',
						url: '/pages/other/setup'
					},
				]
			}
		},
		onLoad() {
			this.menuButtonInfo = this.menuButton;
		},
		onShow() {
			if(this.isLogin){
				this.getUserInfo()
			}else{
				this.userInfo = {
					sysUser: {}
				}
			}
		},
		computed: {
			...mapGetters(["isLogin", 'userId']),
		
		},
		methods: {
			userInfoClick(){
				if(this.isLogin){
					this.navTo('/pages/mine/user_info')
				}
				else{
					login()
				}
			},
			getUserInfo(){
				getUserInfo().then(res => {
					this.userInfo = res.data
					// 未授权过手机号
					if(!this.userInfo.sysUser.phonenumber){
						this.getPhone()
					}
				}).catch(err => {
				})
			},
			getPhone(){
				if(!this.showPhoneCount){
					this.$refs.getPhoneModal.open()
				}
			},
			cancelFun(){
				this.$refs.getPhoneModal.close()
				this.showPhoneCount = 1
			},
			getphonenumber(e){
				if(e.target.errMsg === 'getPhoneNumber:fail user deny'){
					this.cancelFun()
					return this.toast('用户已取消')
				}
				getWechatPhone({code: e.detail.code}).then(res => {
					this.userInfo.sysUser.phonenumber = res.data.phoneNumber
					setUserInfo(this.userInfo).then(res => {
						this.toast('操作成功')
						this.cancelFun()
					})
				})
			},
		}
	}
</script>

<style lang="scss">
	.container {
		background-color: #F3F3F3;
	}

	.user-info-box {
		position: relative;

		.bg {
			position: absolute;
			z-index: 0;
			top: 0;
			left: 0;
			width: 100%;
			height: 580rpx;
		}

		.user-info {
			position: relative;
			z-index: 1;
			width: 100%;
			padding: 50rpx 30rpx 30rpx;

			.avatar {
				width: 150rpx;
				height: 150rpx;
				border-radius: 50%;
			}

			.info-right {
				padding-left: 20rpx;

				.nickname {
					font-size: 36rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #343247;

					image {
						width: 15rpx;
						height: 25rpx;
						margin-left: 10rpx;
					}
				}

				.phone {
					padding-top: 20rpx;
					font-size: 28rpx;
					font-weight: 500;
					color: #4D4A4A;
				}
			}
			
			
		}
	}
	
	.icon-open{
		width: 46rpx;
		height: 46rpx;
	}
	
	.page-title {
		position: relative;
		z-index: 999;
		font-size: 36rpx;
		font-weight: 800;
		color: #333333;
		box-sizing: content-box;
		padding-left: 30rpx;
		padding-bottom: 20rpx;
	}

	
	.menu-list{
		position: relative;
		z-index: 1;
		margin: 30rpx;
		
		.menu-item{
			margin-top: 30rpx;
			height: 146rpx;
			background: #FFFFFF;
			border-radius: 26rpx;
			padding: 0 30rpx;
			font-size: 30rpx;
			font-weight: bold;
			color: #333333;
			
			.icon{
				width: 54rpx;
				height: 54rpx;
				margin-right: 30rpx;
			}
		}
	}
	
	.modal-container{
		width: 550rpx;
		padding: 50rpx 30rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		
		.title{
			font-size: 34rpx;
			font-weight: bold;
			color: #333333;
			text-align: center;
		}
		
		.content{
			text-align: center;
			font-size: 30rpx;
			font-weight: 500;
			color: #333333;
			padding: 50rpx 20rpx;
		}
		
		.btns{
			display: flex;
			font-size: 28px;
			font-weight: bold;
			
			.cancel-btn{
				flex:1;
				height: 68rpx;
				background: #F7F8F9;
				border-radius: 34rpx;
				font-size: 28rpx;
				color: #000;
				margin-right: 30rpx;
			}
			
			.confirm-btn{
				flex:1;
				height: 68rpx;
				background: $theme-color;
				border-radius: 33rpx;
				font-size: 28rpx;
				color:#fff;
			}
		}
	
		.phone-btn{
			border: 0;
			line-height: 1;
			outline: none;
			background: transparent;
			margin:0;
			font-size: 28rpx;
			padding: 0;
		}
		
		.phone-btn::after{
			border:0;
		}
	}
</style>